<div>
    <h1 mat-dialog-title style="display:inline-block;cursor:move;" mat-dialog-draggable>{{'notification.property-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" class="dialog-close-btn">clear</mat-icon>
    <div mat-dialog-content *ngIf="data.editmode < 0">
        {{'msg.notification-remove' | translate}} '{{data.notification.name}}' ?
    </div>
    <div mat-dialog-content *ngIf="data.editmode >= 0">
        <div style="display: block;">
            <div class="my-form-field">
                <span>{{'notification.property-name' | translate}}</span>
                <input [(ngModel)]="data.notification.name" type="text" style="width:400px">
            </div>
        </div>
        <div style="display: block; margin-top: 10px;">
            <div class="my-form-field">
                <span>{{'notification.property-receiver' | translate}}</span>
                <input [(ngModel)]="data.notification.receiver" type="text" style="width:400px">
            </div>
        </div>
        <div style="display: block; margin-top: 10px">
            <div class="my-form-field">
                <span>{{'notification.property-type' | translate}}</span>
                <mat-select [(value)]="data.notification.type" style="width: 207px" (selectionChange)="onTypeChanged(data.notification.type)">
                    <mat-option *ngFor="let ev of notificationsType | enumToArray" [value]="ev.key" [disabled]="ev.key === notificationTrigger">
                        {{ ev.value }}
                    </mat-option>
                </mat-select>
            </div>
            <div class="my-form-field" style="margin-left: 10px; max-width:80px">
                <span>{{'notification.property-delay' | translate}}</span>
                <input numberOnly [(ngModel)]="data.notification.delay" type="number" max="60" min="1" step="1" style="width:80px">
            </div>
            <div class="my-form-field" style="margin-left: 16px; max-width:80px">
                <span>{{'notification.property-interval' | translate}}</span>
                <input numberOnly [(ngModel)]="data.notification.interval" type="number" max="60" min="0" step="1" style="width:80px">
            </div>
        </div>
        <div style="display: block; margin-top: 10px">
            <div class="my-form-field" style="float: right; margin-right: 30px;">
                <span>{{'notification.property-enabled' | translate}}</span>
                <mat-slide-toggle color="primary" [(ngModel)]="data.notification.enabled" style="vertical-align: middle;"></mat-slide-toggle>
            </div>
        </div>
        <div style="display: block; margin-top: 10px;width: 400px">
            <div class="my-form-field" *ngIf="data.notification.type === notificationAlarm">
                <span>{{'notification.property-priority' | translate}}</span>
                <mat-checkbox *ngFor="let item of alarmsType" (change)="onSubscriptionChanged(item, $event.checked)" [checked]="getTypeValue(item)" style="margin: 7px 10px 7px 10px;">
                    {{'alarm.property-' + item | translate}}
                </mat-checkbox>
            </div>
        </div>
        <div style="display: block; margin-top: 10px; height: 20px; margin-bottom: 10px;">
            <div class="message-error" *ngIf="errorMissingValue">
                <span>{{'msg.notification-property-missing-value' | translate}}</span>
            </div>
        </div>
    </div>
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button (click)="onOkClick()" color="primary">{{'dlg.ok' | translate}}</button>
    </div>
</div>